<script setup>
import { ref, onMounted } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
onMounted(() => {
    getQuestion()
})

const getQuestion = async () => {
    //初始化
    let first = function (callback) {
        var c1 = new cloud.Cloud({
            //必填，表示是未登录模式
            identityless: true,
            //资源方 AppID
            resourceAppid: 'wx026afb68a8e326e4',
            //资源方环境 ID
            resourceEnv: 'djcx-ak88-3gjvcbn22ca54f8e',
        })
        c1.init()
        //回调
        callback(c1)
    };
    //完成初始化后再回调，即可访问云数据库
    let callback = function (c1) {
        // 我个人不喜欢写云函数，所以直接写在Web这里做操作
        // 你要访问的各种操作写在这个callback函数里即可，这里以查询users表为例
        const db = c1.database();
        db.collection('question').get({
            success: res => {
                console.log(res.data)
                tableData.value = res.data
                // console.log(tableData.value)
            },
            fail: res => {
                console.log(res);
            }
        })
    };
    first(callback);
}

const tableData = ref([])

const formInline = ref({
    phone: ''
})

const resize = () => {
    formInline.value = {
        phone: ''
    }
    getQuestion()
}

const search = () => {
    tableData.value = tableData.value.filter(item =>
        item.phone === formInline.value.phone
    )
}

const del = (row) => {
    console.log(row._id)
    //初始化

    var c1 = new cloud.Cloud({
        //必填，表示是未登录模式
        identityless: true,
        //资源方 AppID
        resourceAppid: 'wx026afb68a8e326e4',
        //资源方环境 ID
        resourceEnv: 'djcx-ak88-3gjvcbn22ca54f8e',
    })
    c1.init({
        env: "djcx-ak88-3gjvcbn22ca54f8e"
    })

    c1.callFunction({
        name: 'delBattery',
        data: {
            name: 'question',
            id: row._id
        },
        success: res => {
            console.log(res);
            getQuestion()
        },
        fail: res => {
            console.log(res);
        }
    })
}

const dialogFormVisible = ref(false)

const editMessage = (row) => {
    console.log(row)
    dialogFormVisible.value = true
}

const form = ref({
    name: '',
    region: ''
})
</script>

<template>
    <el-form :inline="true" :model="formInline" class="form">

        <el-form-item label="手机号">
            <el-input class="input" v-model="formInline.phone" placeholder="手机号" />
        </el-form-item>

        <el-button type="info" class="button" @click="resize">重置</el-button>
        <el-button type="primary" class="button" @click="search">查询</el-button>
    </el-form>
    <el-table :data="tableData" class="list" style="width: 100%">
        <el-table-column type=index label="序号" width="60" />
        <el-table-column prop="phone" label="手机号" width="120" />
        <el-table-column prop="device" label="装置" width="150" />
        <el-table-column prop="time" label="日期" width="110" />
        <el-table-column prop="type" label="类型" width="80" />
        <el-table-column prop="detail" label="细节" width="120" />
        <el-table-column prop="state" label="是否解决" width="120" />
        <el-table-column prop="edit" label="edit" width="180">
            <template #default="{ row }">
                <el-button type="primary" :icon="Edit" circle @click="editMessage(row)" />
                <el-button type="danger" :icon="Delete" circle @click="del(row)" />
            </template>
        </el-table-column>
    </el-table>
    <div class="footer">
        <div class="page-num">共{{ tableData.length }}条</div>
        <!-- <el-pagination class="page" background layout="prev, pager, next" :total="tableData.length" /> -->
    </div>
    <el-dialog v-model="dialogFormVisible" title="Shipping address">
        <el-form :model="form">
            <el-form-item label="Promotion name" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="Zones" :label-width="formLabelWidth">
                <el-select v-model="form.region" placeholder="Please select a zone">
                    <el-option label="Zone No.1" value="shanghai" />
                    <el-option label="Zone No.2" value="beijing" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                    Confirm
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style scoped>
.form {
    padding: 20px;

    .button {
        margin-bottom: 18px;
    }
}

.list {
    /* padding: 20px; */
    height: 75vh;
    margin-bottom: 5px;
}

.footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 30px;

    .page {
        margin-right: 120px;
    }

    .page-num {
        margin-left: 30px;
    }
}
</style>